# Navbar

The navbar is very important to a website. It allows users to quickly jump between different pages of the website, and also allows users to quickly find some important information of the website.

## Custom navigation menu

You can add a custom navigation menu in `themeConfig.nav`, configured as an array, as follows:

```ts title="rspress.config.ts"
import { defineConfig } from '@rspress/core';

export default defineConfig({
  themeConfig: {
    nav: [],
  },
});
```

The nav bar is configured as an array, and each item in the array is a `NavItem` object, which has the following types:

```ts
export type NavItem = NavItemWithLink | NavItemWithChildren;
```

That is, each navbar element ( `NavItem` ) can be a link ( `NavItemWithLink` ), or a navbar group containing child elements ( `NavItemWithChildren` ).

### NavItemWithLink

```ts
export interface NavItemWithLink {
  text: string;
  link: string;
  activeMatch?: string;
  position?: 'left' | 'right';
}
```

The meanings of the attributes are as follows:

- `text` - Navbar text
- `link` - Navbar link
- `activeMatch` - Activation rule for navbar links
- `position` - Navbar menu item position

Attribute details:

`activeMatch` is used to match the current route, when the route matches the `activeMatch` rule, the nav item will be highlighted.

> By default, `activeMatch` is the `link` attribute of NavItem.

`position` is used to configure independent positioning of top menu items, with the following options available:

- `left` placed in the left menu bar at the top of the menu item;
- `right` placed in the right menu bar at the top of the menu item.

> If the `position` is not configured, it will be placed on the right menu bar by default, which is equivalent to configuring `right` .

### NavItemWithChildren

```ts
export interface NavItemWithChildren {
  text: string;
  items: NavItem[];
  position?: 'left' | 'right';
}
```

The meanings of the attributes are as follows:

- `text` - Navbar text
- `items` - Sub navbar elements
- `position` - Navbar menu item position with child navbar elements

### Example

```ts title="rspress.config.ts"
import { defineConfig } from '@rspress/core';

export default defineConfig({
  themeConfig: {
    nav: [
      {
        text: 'Home',
        link: '/',
        position: 'left',
      },
      {
        text: 'Links',
        items: [
          {
            text: 'GitHub',
            link: 'http://github.com/',
          },
          {
            text: 'X',
            link: 'http://x.com/',
          },
        ],
        position: 'left',
      },
    ],
  },
});
```

## Light/Dark Mode

By default, the navbar will have a toggle button for `Light/Dark` mode, you can disable it with the following config:

```ts title="rspress.config.ts"
import { defineConfig } from '@rspress/core';

export default defineConfig({
  themeConfig: {
    darkMode: false,
  },
});
```

## Related links

Social Links to the Site. For example:

```ts title="rspress.config.ts"
import { defineConfig } from '@rspress/core';

export default defineConfig({
  themeConfig: {
    socialLinks: [
      {
        icon: 'github',
        mode: 'link',
        content: 'https://github.com/web-infra-dev/modern.js',
      },
    ],
  },
});
```

For more configurations, please refer to [links](/api/config/config-theme#sociallinks).
